<template>
	<view class="table-style">
		<view class="none-style"></view>
		<view class="first-style" :style="borderStyle">{{first}}</view>
		<input class="second-style" @blur="changeGoods(first)" :style="borderStyle" type="text" placeholder="请输入" v-model='second' @input="inputSecond" />
		<input class="last-style" @blur="changeGoods(first)" :style="borderStyle" type="text" placeholder="请输入" v-model='last' @input="inputLast" />
		<!-- <view class="second-style" :style="borderStyle">{{goodsName}}</view> -->
		<!-- <view class="third-style" :style="borderStyle">{{amount}}</view> -->
		<!-- <view class="last-style" :style="borderStyle">{{unit}}</view> -->
		<view v-if="removeable" class="reduce-style" @click="remove(first)">删除</view>
	</view>
	
</template>

<script>
	/**
	 * author: 刘子恒
	 * description: 用于物品放行模块中 物品放行申请详情 的 物品信息表格
	 * number为表格第一列，序号
	 * goodsName为表格第二列，物品名称
	 * unit为表格第三列，数量
	 * amount为表格第四列，单位
	 * isLast表示该条记录是否是最后一条，用于防止相邻两条记录上下边框重叠过粗
	 * 		isLast为true时，显示下边框
	 * 		isLast为false时，不显示下边框
	 */
	export default{
		data() {
			return {
				borderStyle: this.isLast?'border-bottom: solid 1rpx #C0C0C0;':'',
				secondOut: this.second,
				lastOut: this.last,
			}
		},
		props: {
			first: {
				type: String,
				default: ''
			},
			second:{
				type:String,
				default:''
			},
			last:{
				type:String,
				default:''
			},
			isLast:{
				type:Boolean,
				default:false
			},
			removeable:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			inputSecond(e) {
				this.secondOut = e.detail.value
			},
			inputLast(e) {
				this.lastOut = e.detail.value
			},
			remove(index){
				console.log("[info]","调试卡片删除方法，我是子组件"+index)
				this.$emit("removeSelf",index - 1)
			},
			changeGoods(index){
				this.$emit("changeGoods",index - 1, this.secondOut, this.lastOut)
			}
		},
	}
</script>

<style>
	.table-style{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.none-style{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 76rpx;
/* 		border: solid 1rpx #C0C0C0;
		background-color: #FFFFFF; */
		border-bottom: none;
		border-right: none;
	}
	.first-style{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 49rpx;
		width: 100rpx;
		border: solid 1rpx #C0C0C0;
		background-color: #FFFFFF;
		border-bottom: none;
		border-right: none;
	}
	.second-style{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 149rpx;
		border: solid 1rpx #C0C0C0;
		background-color: #FFFFFF;
		border-bottom: none;
	}
	.last-style{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 349rpx;
		border: solid 1rpx #C0C0C0;
		background-color: #FFFFFF;
		border-bottom: none;
		border-left: none;
	}
	.reduce-style{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 25rpx;
		width: 70rpx;
		color: #DD524D;
/* 		border: solid 1rpx #C0C0C0;
		background-color: #FFFFFF; */
		border-bottom: none;
		border-left: none;
	}
</style>
